<template>
  <div class="container-setting">
      <el-card>
          <div slot="header">
            <my-bread>个人设置</my-bread>
          </div>
          <!-- 栅格 -->
          <el-row>
              <!-- 表单 -->
              <el-col :span="12">
                  <el-form label-width="120px">
                      <el-form-item label="编号:">{{userForm.id}}</el-form-item>
                      <el-form-item label="手机:">{{userForm.mobile}}</el-form-item>
                      <el-form-item label="媒体名称:">
                        <el-input v-model="userForm.name" placeholder="请输入媒体名称"></el-input>
                      </el-form-item>
                      <el-form-item label="媒体介绍:">
                        <el-input type="textarea" :row="3" v-model="userForm.intro" placeholder="请输入媒体介绍"></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱:">
                          <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                      <el-form-item>
                          <el-button type="primary" @click="updateUserInfo()">保存设置</el-button>
                      </el-form-item>
                  </el-form>
              </el-col>
              <!-- 修改头像 -->
              <el-col :span="12">
                  <el-upload
                  class="avatar-uploader"
                  action=""
                  :http-request="changeFile"
                  :show-file-list="false"
                  >
                 <img v-if="userForm.photo" :src="userForm.photo" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p class="text">修改头像</p>
              </el-col>
          </el-row>
      </el-card>
  </div>
</template>

<script>
import eventBus from '@/eventBus'
import auth from '@/utils/auth'
export default {
  name:'setting-page',
  data() {
      return {
        // 个人信息
        userForm:{
            id:null,
            mobile:null,
            name:null,
            intro:null,
            email:null,
            photo:null
        },
        // 支持上传组件预览图
        imageUrl:null
      }
  },
  created() {
      this.getUserInfo()
  },
  methods: {
    // 选择图片后执行函数
    async changeFile({file}){
    // console.log(obj) 
    // 完成上传
    try{
       // 1.得到选择的图片数据
    // 2.组装成formData对象 
    const formData = new FormData()
    formData.append('photo',file)
    // 3.使用axios提交数据
   const{data:{data}} =await this.$http.patch('/user/photo',formData)
    // 4.成功
    // 4.1提示：修改头像成功
    this.$message.success('修改头像成功')
    // 4.2上传成功后的图片进行预览
    this.userForm.photo = data.photo
    // 4.3同步更新Layout组件头像
    eventBus.$emit('updlata-user-photo',data.photo)
    // 4.4同步更新本地存储的头像
    const localUser = auth.getUser()
    localUser.photo =data.photo
    auth.setUser(localUser)
    }catch(e){
    // 5.失败 提示即可 
     this.$message.error('修改头像失败')
    }   
    
    },
      //那用户信息   
      async getUserInfo(){
          const { data: { data } } = await this.$http.get('/user/profile')
          this.userForm = data
      },
       //  编辑用户信息
    async updateUserInfo(){
     try{
         // 接口只需三个字段
    const {name,intro,email}  = this.userForm
    // 提交请求
    await this.$http.patch('/user/profile',{name,intro,email})
    // 成功提示
    this.$message.success('保存设置车成功')
    // 同步Layout组件的用户名称
    eventBus.$emit('update-user-name',name)
    // 同步本地存储的用户名称
    // 拿出数据
    const localUser = auth.getUser()
    // 修改数据
    localUser.name = name
    // 存储数据
    auth.setUser(localUser)
    } catch(e){
        // 失败
        if(e.response && e.response.status===409){
         return this.$message.error('保存设置失败')
    }
     }
    }
  },
}
</script>

<style scoped lang='less'>
.text{
    text-align: center;
    font-size: 12px;
}
</style>